<template>
	<view>
		<view class="navigation">
			<view class="navigation_back" @tap="backref()">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="navigation_title">
				商品评价
			</view>
		</view>
		<view class="evaluate_con">
			<view class="evaluate_info">
				<view class="evaluate_info_hd">
					<view class="evaluate_info_img">
						<!-- <image src="../../static/image/shop/shop_01.jpg" mode=""></image> -->
					</view>
					<view class="evaluate_info_name" v-if="orderDetail.business">
						{{orderDetail.business.name}}
					</view>
				</view>
				<view class="evaluate_info_bd">
					<view class="evaluate_info_label">
						整体评价
					</view>
					<view class="evaluate_info_stars">
						<uni-rate v-model="commentDto.start" activeColor="rgba(255, 141, 26, 1)"></uni-rate>
		<!-- 				<view class="evaluate_star" @tap="chanStar(1)">
							<image src="../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 1"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 1"></image>
						</view>
						<view class="evaluate_star" @tap="chanStar(2)">
							<image src=".../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 2"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 2"></image>
						</view>
						<view class="evaluate_star" @tap="chanStar(3)">
							<image src=".../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 3"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 3"></image>
						</view>
						<view class="evaluate_star" @tap="chanStar(4)">
							<image src=".../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 4"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 4"></image>
						</view>
						<view class="evaluate_star" @tap="chanStar(5)">
							<image src=".../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 5"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 5"></image>
						</view>
 -->
					</view>
				</view>
			</view>
			<view class="evaluate_message">
				<textarea v-model="commentDto.comment" placeholder="写下你对商家的评价"></textarea>
				<!-- <view class="evaluate_message_imgs">
					<view class="evaluate_message_img" v-for="(item,index) in commentDto.picList">
						<image :src="item" mode="aspectFill"></image>
					</view>
					<view class="evaluate_message_add" v-if="commentDto.picList.length < 3" @tap="addPic()">
						<uni-icons type="plusempty" size="20" color="#CAD2DB"></uni-icons>
						<text>{{commentDto.picList.length}}/3</text>
					</view>
				</view> -->
			</view>
			<view class="evaluate_btn" @tap="sureSend()">
				发布评论
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		evaluateOrder
	} from '../../api/api.js'
	export default {
		data() {
			return {
				orderId:'',
				orderNumber:'',
				commentDto: {
					start: 5,
					comment: ''
					// picList:[]
				},
				orderDetail:{},
				orderList:[]
			};
		},
		methods: {
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			chanStar(num) {
				this.commentDto.star = num;
			},
			addPic() {
				const vm = this;
				uni.chooseImage({
					success: function(res) {
						let imageUrl = res.tempFilePaths[0]; // 显示选择的图片
						vm.commentDto.picList.push(imageUrl)
						// uni.uploadFile({
						// 	url: 'http://baidefuappapi.zhilongapp.com/app/storage/upload',
						// 	filePath: imageUrl,
						// 	name: 'file',
						// 	formData: {},
						// 	success: res => {
						// 		let data = JSON.parse(res.data);
						// 		if (data.code == 200) {
						// 			vm.commentDto.picList.push(data.data.url)
						// 		}
						// 		// 失败报错
						// 		if (data.code == 500) {
						// 			uni.showToast({
						// 				title: '上传失败',
						// 				icon: 'none',
						// 				duration: 2000
						// 			});
						// 		}
						// 	}
						// });
					}
				});
			},
			sureSend() {
				if (!this.commentDto.comment) {
					uni.showToast({
						title: "请输入评论",
						icon: 'none',
						duration: 2000
					})
					return
				}
				evaluateOrder({
					start: this.commentDto.start,
					comment:this.commentDto.comment,
					orderId: this.orderId,
					businessId: this.orderDetail.business.id
				}).then(res => {
					uni.showToast({
						title: "评论成功",
						icon: 'none',
						duration: 2000
					})
					uni.navigateTo({
						url: '/pages/order/order'
					})
				})
			},
			getDetail() {
				getOrderDetail({
					orderNumber: this.orderNumber
				}).then(res => {
					this.orderDetail = res.data.order
					this.orderList = res.data.orderList
				})
			},
		},
		onLoad(e) {
			this.orderId = e.id
			this.orderNumber = e.orderNumber
			this.getDetail()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9FBFC;
	}

	.navigation {
		width: 100%;
		height: 150rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;
		background-color: #fff;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #333;
			font-size: 36rpx;
		}
	}

	.evaluate_con {
		padding: 0 24rpx;

		.evaluate_info {
			margin-top: 40rpx;
			padding: 24rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.evaluate_info_hd {
				display: flex;
				align-items: center;

				.evaluate_info_img {
					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}
				}

				.evaluate_info_name {
					font-size: 36rpx;
					color: #2E343A;
					font-weight: 500;
					margin-left: 20rpx;
				}
			}

			.evaluate_info_bd {
				display: flex;
				align-items: center;
				margin-top: 18rpx;

				.evaluate_info_label {
					color: #000000;
					font-size: 24rpx;
					font-weight: bolder;
				}

				.evaluate_info_stars {
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					.evaluate_star {
						margin-right: 20rpx;

						image {
							width: 48rpx;
							height: 44rpx;
						}
					}
				}
			}
		}

		.evaluate_message {
			margin-top: 24rpx;
			padding: 24rpx;
			border-radius: 12rpx;
			background-color: #fff;

			textarea {
				height: 200rpx;
			}

			.evaluate_message_imgs {
				display: flex;
				flex-wrap: wrap;

				.evaluate_message_img {
					width: 136rpx;
					height: 136rpx;
					border-radius: 8rpx;
					margin-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.evaluate_message_add {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 136rpx;
				height: 136rpx;
				border-radius: 8rpx;
				border: 1rpx dashed #CAD2DB;
				background-color: #F6F7F8;

				text {
					font-size: 24rpx;
					color: #CAD2DB;
				}
			}
		}

		.evaluate_btn {
			width: 100%;
			height: 90rpx;
			border-radius: 90rpx;
			background-color: rgba(255, 141, 26, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #FFFFFF;
			margin-top: 70rpx;
		}
	}
</style>
